<%@ page import="com.aimee.entity.LeaveWordAnswers" %>
<%@ page import="java.util.List" %>
<%@ page import="com.aimee.entity.LeaveWords" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全部留言</title>
  <script src="../js/jquery.min.js"></script>
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    body {
      margin: 10px 10px;
    }

    li {
      list-style: none;
    }

    .answer {
      display: none;
    }

    a {
      color: rgb(112, 157, 224);
    }

    .tximg {
      width: 20px;
      height: 20px;
      border-radius: 5px;
    }

    .leaveuser {
      display: inline-block;
      color: rgb(153, 153, 153);
      font-size: small;
    }

    .caozuo {
      position: relative;
      left: 78%;
      /* margin-right: 30px; */
      display: inline-block;
      width: 200px;
    }

    .leavecontent {
      font-size: small;
      margin-left: 50px;
      width: 70%;
    }

    .leavetime {
      color: rgb(153, 153, 153);
    }
  </style>
</head>
<%
  List<LeaveWords> list = (List<LeaveWords>) request.getAttribute("leaveWordlist");
  List list1 = (List) request.getAttribute("leaveWordAnswerlist");
%>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>留言信息</legend>
</fieldset>
<%--填写留言回复信息--%>
<form class="layui-form layui-form-pane" method="post" action="../admin/leaveword?m=addLeaveword">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">留言区</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入留言内容" class="layui-textarea" name="Content"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" type="submit" lay-filter="demo2" style="position:relative;left:90%">发表留言</button>
  </div>
</form>
<!-- 留言 -->
<ul class="leaveWordtop" style="margin-bottom: 20px">
  <!-- 用户留言******************index从0开始 count从1开始*********************************************** -->
  <%
    for (int i = 0; i < list.size(); i++) {
      out.print("<li>");
      out.print("<div>");
      out.print("<div>");
      out.print(" <img src=\"../img/student.png\" class=\"tximg\" alt=\"\">");
      out.print(" <div class='leaveuser'>" + list.get(i).user_name + ":</div>");
      out.print(" <div class=\"caozuo\">\n" +
              "                          <a class=\"toanswer\" href=\"#\" onclick=\"answertext('../admin/leaveword?m=addleavewordanswer'," +list.get(i).leaveWord_id + ")\">回复</a>\n" +

              "<a class=\"checkanswer\" href=\"#\" dataid=\"${leaveWord.leaveWord_id}\" onclick=\"show(" + i + ")\">查看回复</a>" +
              "</div>");
      out.print("</div>");
      out.print(" <div class=\"leavecontent\">\n" +
              "                      <P>" + list.get(i).leaveWord_content + "\n" +
              "                          <span class=\"leavetime\">" + list.get(i).leaveWord_date + "</span></P>\n" +
              " </div>\n");
      out.print("</div>");

      out.print(" <ul class=\"answer\" style=\"margin-left: 50px;\">");
      for (int j = 0; j < (((List<LeaveWordAnswers>) list1.get(i))).size(); j++) {
        out.print(" <li>");
        out.print(" <img src=\"../img/teacher.png\" alt=\"\" class=\"tximg\">");
  %>
  <div class="leaveuser"><%=(((List<LeaveWordAnswers>) list1.get(i))).get(j).user_name%>回复<%=list.get(i).user_name%>
  </div>
  <%--    <%
                  out.print(" <div class=\"caozuo\">\n" +
                          "                              <a class=\"toanswer\" href=\"#\" onclick=\"answertext("+j+")\">回复</a>\n" +
                          "                              <a class=\"delanswer\" href=\"#\" onclick=\"delanswer("+j+")\">删除</a>\n" +
                          "                          </div>");
                  %>--%>
  <div class="caozuo">
    <a class="toanswer" href="#" onclick="answertext('../admin/leaveword?m=addleavewordanswer',<%=(((List<LeaveWordAnswers>) list1.get(i))).get(j).leaveWord_id%>)">回复</a>

  </div>
  <div class="leavecontent">
    <p><%=(((List<LeaveWordAnswers>) list1.get(i))).get(j).answer_content%>
      <span class="leavetime"><%=(((List<LeaveWordAnswers>) list1.get(i))).get(j).answer_date%></span></p>
  </div>
  <%
        out.print("</li>");
      }
      out.print(" </ul>\n" +
              "          </li>");
      out.print("");

    }
  %>
  <%--  <c:forEach items="${leaveWordlist}" var="leaveWord" varStatus="i">
        <li>

            <div>
                <div>
                    <img src="../img/student.png" class="tximg" alt="">
                    <div class="leaveuser">${leaveWord.user_name}:</div>
                    <div class="caozuo">
                        <a class="toanswer" href="#" onclick="answertext(${i.index})">回复</a>
                        <a class="delleave" href="#" onclick="delleave(${i.index})">删除</a>
                            &lt;%&ndash;onclick="show(${i.index})"
                            http://localhost:8080/OnlineExam/admin/leaveword?m=findLeaveWordAnswer&leaveWord_id=${leaveWord.leaveWord_id}&ndash;%&gt;

                        <a class="checkanswer" href="#" dataid="${leaveWord.leaveWord_id}" onclick="show(${i.index})">查看回复</a>
                    </div>
                </div>
                <div class="leavecontent">
                    <P>${leaveWord.leaveWord_content}
                        <span class="leavetime">${leaveWord.leaveWord_date}</span></P>
                </div>
            </div>

            <!-- 留言回复 -->
            <ul class="answer" style="margin-left: 50px;">
                <c:forEach items="${leaveWordAnswerlist.get(1)}"   var="Answer" varStatus="j">
                    <li>
                        <img src="../img/teacher.png" alt="" class="tximg">
                        <div class="leaveuser"><%=(((List<LeaveWordAnswers>) list1.get(1))).get(0).user_name%>回复${leaveWord.user_name}</div>
                        <div class="caozuo">
                            <a class="toanswer" href="#" onclick="answertext(0)">回复</a>
                            <a class="delanswer" href="#" onclick="delanswer(0)">删除</a>
                        </div>
                        <div class="leavecontent">
                            <p><%=(((List<LeaveWordAnswers>) list1.get(1))).get(0).answer_content%>
                                <span class="leavetime"><%=(((List<LeaveWordAnswers>) list1.get(1))).get(0).answer_date%></span></p>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </li>
    </c:forEach>--%>
</ul>
</body>
<script src="../layui/layui.js" charset="utf-8"></script>
<%--<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->--%>
<script type="text/javascript">
  layui.use('layer', function () {
    var $ = layui.jquery, layer = layui.layer;
    //删除留言函数
    $(".delleave").click(function () {
      var leaveWord_id = $(this).attr("dataid");
      layer.confirm('您确定删除该用户？', {btn: ['确定', '取消'], title: "提示"}, function (index) {
        console.log("已删除--》" + leaveWord_id);
        location.href = "http://localhost:8080/OnlineExam/admin/leaveword?m=delleaveword&leaveWord_id=" + leaveWord_id;
        layer.close(index);
      });
    });

    //删除回复函数
    $(".delanswer").click(function () {
      var answer_id = $(this).attr("dataid");
      layer.confirm('您确定删除该用户？', {btn: ['确定', '取消'], title: "提示"}, function (index) {
        console.log("已删除--》" + answer_id);
        location.href = "http://localhost:8080/OnlineExam/admin/leaveword?m=delleavewordanswer&answer_id=" + answer_id;
        layer.close(index);
      });
    });

  })


  //给留言板查看回复加事件
  var checkanswer = document.querySelectorAll(".checkanswer");
  var answer = document.querySelectorAll(".answer");
  var text = document.querySelector("textarea");
  console.log(checkanswer);

  //查看回复函数
  function show(n) {
    console.log("执行show函数")
    if (checkanswer[n].innerHTML == "查看回复") {
      answer[n].style.display = "block";
      checkanswer[n].innerHTML = "收起回复";
    } else {
      answer[n].style.display = "none";
      checkanswer[n].innerHTML = "查看回复";
    }
  }


  //回复获得焦点函数
  function answertext(m,n) {
    var formac = document.querySelector("form");
    // m为action地址
    text.focus();
    console.log(m+"--"+n);
    /* if(m=='../admin/leaveword?m=addLeaveword'){
         formac.action = m+"&user_id="+n;
     }else {*/
    formac.action = m+"&leaveWord_id="+n;
    // }
    console.log(formac.action);

  }

  /*  for (var i = 0; i < checkanswer.length; i++) {
        console.log(checkanswer[i]);
        console.log(i);
        checkanswer[i].onclick=function () {
            // console.log(i)
            // console.log("执行点击函数"+i)
            var id = $(this).attr("dataid");
            if ($(this).innerHTML === "查看回复") {
                answer.style.display = "block";
                $(this).innerHTML = "收起回复";
                $.get("../admin/leaveword?m=findLeaveWordAnswer",{ "leaveWord_id":id},function(data,status){
                    console.log("服务器数据="+data);
                    //json数据解析
                    var obj=JSON.parse(data);
                    console.log(obj)
                })
            } else {
                answer.style.display = "none";
                $(this).innerHTML = "查看回复";
            }
        }
    }
*/


</script>

</html>